<template>
	<view>
		<Cell label="自动拍照">
			<view class="top-switch" :class="{active: switchOn}" @click="toggleSwitch"></view>

		</Cell>
		<Cell v-show="switchOn" label="选择拍照时间" value="不限制" arrow  @onFormat="setting('选择拍照时间')"></Cell>
		<Cell v-show="switchOn" label="单次拍照数" value="2张" arrow  @onFormat="setting('单次拍照数')"></Cell>
		<Cell v-show="switchOn" label="单日最大拍照数" value="3张" arrow  @onFormat="setting('单日最大拍照数')"></Cell>

		<tn-popup v-model="showPopup" mode="bottom" borderRadius="50" closeBtn>
			<view class="popup-card">
        <view class="popup-header">
          <view class="popup-title">{{ title }}</view>
        </view>
        <view v-if="title != '选择拍照时间'" class="popup-option" @click="selectOption(item, idx)" v-for="(item, idx) in options" :key="idx">{{item}}</view>
				

				<view class="time" v-if="title == '选择拍照时间'">
			<view class="time-picker-row">
				<picker-view style="background-color: #fff !important;" :value="pickerValue" @change="onPickerChange" class="time-picker">
					<picker-view-column>

						<view v-for="(item, idx) in hours" :key="idx" :class="['time-item', pickerValue[0] === idx ? 'active' : '']">{{item}}</view>
					</picker-view-column>
					<picker-view-column>
						<view v-if="idx>0" v-for="(item, idx) in hours" :key="idx" :class="['time-item', pickerValue[1] === idx ? 'active' : '']">{{item}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</view>
      </view>
    </tn-popup>

		<!-- <tn-select v-model="showTime" mode="multi" :list="list" @confirm="confirm"></tn-select> -->

	</view>
</template>
<script>
import Cell from '../../component/cell.vue'		
export default {	
	components: {
		Cell
	},
	data() {
		return {
			showTime:true,
			showPopup: false,
			switchOn: false,
			options: ['45s', '60s', '1m30s', '2m', '3m'],
			title: '单次拍照数',
			list: [
					[
						{
							value: '1',
							label: 'A'
						},
						{
							value: '2',
							label: 'B'
						}
					],
					[
						{
							value: '3',
							label: 'C'
						},
						{
							value: '4',
							label: 'D'
						}
					],
					
				],
			pickerValue: [0, 0],
			hours: [
			'不限制', 	'00:00', '01:00', '02:00', '03:00', '04:00', '05:00',
				'06:00', '07:00', '08:00', '09:00', '10:00', '11:00',
				'12:00', '13:00', '14:00', '15:00', '16:00', '17:00',
				'18:00', '19:00', '20:00', '21:00', '22:00', '23:00'
			],
			unlimit: true,
		}
	},
	methods: {
		selectOption(item, idx) { 
			this.showPopup = false
		},
		setting(title) {
			this.title = title
			if (title == '单次拍照数') { 
				this.options = ['1张', '2张', '3张', '4张', '5张']
			} else if (title == '单日最大拍照数') { 
				this.options = ['10张', '15张', '20张', '30张', '40张']
			}
			this.showPopup = true
		 },
		toggleSwitch() {
			this.switchOn = !this.switchOn
		},
		goPhoto() {
			console.log(1);
			
			uni.navigateTo({
				url: '/pages/video/setting/photo'
			})
		},
		goVideo() {
			uni.navigateTo({
				url: '/pages/video/setting/video'
			})
		},
		chooseUnlimit() {
			this.unlimit = !this.unlimit
		},
		onPickerChange(e) {
			this.pickerValue = e.detail.value
		},
	},
}
</script>
<style scoped>
.model-setting-container {
  min-height: 100vh;
  padding: 36rpx 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.sel{
  background: #000;
  color: #fff !important;

}
.model-setting-btn {
  width: 95vw;
  max-width: 700rpx;
  height: 100rpx;
  border-radius: 32rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36rpx;
  font-weight: 500;
}
.model-setting-item {
  max-width: 700rpx;
  width: 95vw;
  height: 80rpx;
  border-radius: 32rpx;

  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34rpx;
  color: #111;
  text-align: center;
  margin-bottom: 50rpx;
}

.popup-mask {
  position: fixed;
  left: 0; top: 0; right: 0; bottom: 0;
  z-index: 9999;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.popup-card {

  width: 100vw;
  background: #fff;
  border-radius: 36rpx;
  box-shadow: 0 8rpx 32rpx 0 rgba(0,0,0,0.08);
  padding: 40rpx 0 0 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.popup-header {
	margin-bottom: 60rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40rpx;
}
.popup-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #111;
}
.popup-close {
  font-size: 44rpx;
  color: #888;
  font-weight: bold;
  cursor: pointer;
}
.popup-desc {
  color: #888;
  font-size: 26rpx;
  padding: 18rpx 40rpx 0 40rpx;
  margin-bottom: 30rpx;
}
.popup-option {
  font-size: 32rpx;
  color: #111;
  text-align: center;
  padding: 36rpx 0;
  border-top: 1rpx solid #f2f2f2;
}
.top-switch {
	width: 80rpx;
	height: 44rpx;
	background: #ddd;
	border-radius: 22rpx;
	position: relative;
	transition: background 0.3s ease;
	cursor: pointer;
}

.top-switch.active {
	background: #000;
}

.top-switch::after {
	content: '';
	position: absolute;
	top: 4rpx;
	left: 4rpx;
	width: 36rpx;
	height: 36rpx;
	background: #fff;
	border-radius: 50%;
	transition: transform 0.3s ease;
}

.top-switch.active::after {
	transform: translateX(36rpx);
}

.time {
  border-radius: 40rpx 40rpx 0 0;
  padding: 48rpx 0 0 0;
  box-sizing: border-box;
  width: 100vw;
  max-width: 700rpx;
  margin: 0 auto;
  min-height: 500rpx;
}
.time-title {
  font-size: 36rpx;
  font-weight: bold;
  color: #111;
  margin-left: 40rpx;
  margin-bottom: 32rpx;
}
.time-unlimit {
  color: #bbb;
  font-size: 30rpx;
  text-align: center;
  margin-bottom: 24rpx;
}
.time-unlimit.active {
  color: #111;
  font-weight: bold;
}
.time-picker-row {
	background-color: #fff ;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
.time-picker {
  width: 90vw;
  max-width: 600rpx;
  height: 300rpx;
}
.time-item {
  height: 60rpx;
  line-height: 60rpx;
  text-align: center;
  font-size: 32rpx;
  color: #888;
}
.time-item.active {
  color: #111;
  font-weight: bold;
  font-size: 36rpx;
}

</style>
